<template>
    <div>

        <div class="show_content">
            <div class="show_image" :data="form" >
                <div class="show_image_item">
                    <!-- :onerror="defalutLogoUrl" -->
                        <img :src="form.img1" alt="" :onerror="defalutLogoUrl"  >
                </div>
                <div class="show_image_item">
                        <img :src="form.img2" alt="" :onerror="defalutLogoUrl"  >
                </div>
                <div class="show_image_item">
                        <img :src="form.img3" alt="" :onerror="defalutLogoUrl"  >
                </div>
            </div>
            <div class="show_word">
                <h3>{{form.name}}</h3>
                <p>
                    {{form.introduce}}
                </p>
            </div>
            <div class="outBtn">
                <el-button type="info" @click="returnBtn">返回</el-button>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
             defalutLogoUrl:'this.src="'+  require("../../assets/img/7.jpg")  +'"',
             form:'',
             id:''
        }
    },
     mounted(){
        console.log(this.$route.query.id)
        this.id = this.$route.query.id
        this.getSelectId()
    },
    methods:{
        async getSelectId(){
            
            const res = await this.http.get('/product/selectById',{id:this.id})
            this.form = res
            console.log('----k---');
            console.log(res);
 

        },
        returnBtn(){
            this.$router.push('/primary')
        }
    },
   
    created(){
        // this.id = this.$route.query.id
    }
}
</script>

<style scoped>
.show_content{
    width: 100%;
    height:640px;
    /* background: pink; */
    padding-top:50px;
}
.show_image{
    width:800px;
    height: 200px;
    /* background: yellow; */
    /* position: absolute; */
    margin: 0 auto;
}
.show_image img{
    width: 100%;
    height: 100%;
}
.show_image_item{
    width:240px;
    height: 180px;
    /* background: red; */
    float: left;
    margin-right: 26px;
}

.show_word{
    width: 800px;
    height: 300px;
    background:#f3f3f3;
    margin: 0 auto;
    position: relative;
    top: 20px;
    text-align: center;
}
.show_word h3{
    padding-top: 20px;
}
.show_word p{
    text-align: left;
    display: block;
    padding-left: 40px;
    padding-right: 40px;
}
.outBtn{
    width:200px;
    height:40px;
    background: pink;
    position: relative;
    top: 40px;
    margin: 0 auto;
}
.outBtn .el-button{
    width: 100%;
    height: 100%;
}
</style>